<!--商品发布-->
<template lang="html">
	<div>
		<!--头部-->
		<van-nav-bar title="重新发布商品" @click-left="onClickLeft"> 
		  <van-icon name="arrow-left" slot="left" color="#000" size="20"/>		  
		  <div class="a" slot="right">
		  	<van-button round type="info" :loading="isLoading"
		  		 size="small" @click="release"
		  		class="release" :class="{active:canRelease}">
		  	 <div style="height: 100%;display: flex;align-items: center;justify-content: center;">发布</div>
		  	</van-button>		  		
		  </div>		  
		</van-nav-bar>
		
		<div v-if="forbiddenWords">
			<img src="../../../../static/img/lanhu2/18.png" alt="" style="width: 100%;display: block;"/>
		</div>		
		
		<div class="wrap" >
			<div>
			  <van-field
			  	style="padding: 0;"
			    v-model="params.comDesc"
			    rows="6"
			    autosize
			    type="textarea"
			    maxlength="50"
			    placeholder="品牌型号，新旧程度，入手渠道，转手原因..."		    
			  />		  
			</div>
			
			<div class="imgList">
				<div v-for="(item,index) in imgList" class="imgContain" :key="index">
					<div class="clear" @click="delImg(index)">
						<img src="../../../../static/img/lanhu/43.png" alt="" style="width: 13px;height: 13px;"/>
					</div>
					<img :src="item" alt=""/>
				</div>
				
                <div v-if="imgList.length<9" @click="getImgUrl(imgList.length)" class="imgContain">
                	<img src="../../../../static/img/lanhu/87.png" alt=""/>
                </div>
			</div>
			
			<div class="tips" @click="showAddressPopup">
				<div style="display: inline-block;">
					<div class="span" style="display: flex;align-items: center;">
						<img src="../../../../static/img/lanhu/34.png" alt="" style="width: 10px;height: 12px;margin-right: 4px;vertical-align: text-top;"/>
						<span>发货地：{{params.address}}</span>
					</div>
				</div>
			</div>	
			
			<div class="cell">	 
	            <van-cell  is-link  
	            	size="large"  class="borderCell"   @click="showPrice"          	
	            >
	               <div slot="title">
	               	  <img src="../../../../static/img/lanhu/36.png" alt="" class="cell_img"/>
	               	  <span>价格</span>
	               </div>
	               <div slot="default">
	               	  <span v-if="params.comPrice==0.00">开个价</span>
	               	  <span style="color: #F22613;font-size: 14px;font-weight: 500;" v-else>{{params.comPrice}}</span>
	               </div>	
	               <div slot="label" style="width: 240px;padding-top: 5px;">
	               	  平台管理费:<span style="color: #F22613;">{{goodsManagerFee}}%</span>
	               </div>	               
	            </van-cell>	
	            
	            
	            <van-cell  is-link  
	            	size="large"  class="borderCell"   @click="showMoney"          	
	            >
	               <div slot="title">
	               	  <img src="../../../../static/img/lanhu/38.png" alt="" class="cell_img"/>
	               	  <span>佣金</span>
	               </div>
	               <div slot="default">
	               	  <span v-if="params.money==0.00">设定佣金助理推广</span>
	               	  <span style="color: #333;font-size: 14px;font-weight: 500;" v-else>{{params.money}}</span>
	               </div>	            
	            </van-cell>	
	            
	            <van-cell  is-link  
	            	size="large"  class="borderCell"   @click="showCategoryWin"   icon="bar-chart-o"  	
	            >
	               <div slot="title">	               	 
	               	  <span style="margin-left: 4px;">商品分类</span>
	               </div>
	               <div slot="default">
	               	  <span v-if="categoryId<0">必填</span>
	               	  <span  v-else>{{categoryIdName}}</span>
	               </div>	            
	            </van-cell>		            
	            
	            
	            <van-cell  is-link  
	            	size="large"  class="borderCell"   @click="showCategory"          	
	            >
	               <div slot="title">
	               	  <img src="../../../../static/img/lanhu/35.png" alt="" class="cell_img"/>
	               	  <span>更多信息</span>
	               </div>
	               <div slot="default">
	               	  <span>{{formatName(categoryName)}}</span>	               	 
	               </div>	            
	            </van-cell>	
	            
	            <van-cell  is-link  
	            	size="large"  class="borderCell"   @click="showNumber"          	
	            >
	               <div slot="title">
	               	  <img src="../../../../static/img/lanhu/37.png" alt="" class="cell_img"/>
	               	  <span>数量</span>
	               </div>
	               <div slot="default">
	               	  <span>{{formatCount(goodsCount)}}</span>
	               </div>	            
	            </van-cell>		
	            <van-cell   
	            	size="large"  class="borderCell"         	
	            >
	               <div slot="title">	               	 
	               	  <span style="font-size: 14px;color: #999;">总价</span>
	               	  <span style="font-size: 12px;color: #999;">（价格*数量）</span>
	               	  <span style="font-size: 12px;color: #999;">:</span>
	               </div>
	               <div slot="default">
	               	  <span style="color: #F22613;font-weight: 500;">{{all}}</span>
	               </div>	            
	            </van-cell>	 	            
			</div>		
			
			
			<div class="defaultWrap">
				<div class="left">
					<div class="word1" style="font-size: 14px;">全新发布</div>
					<div class="word2" style="margin-top: 5px;color: #999999;">作为全新商品发布，让更多人看到</div>
				</div>
				<div class="right">
                    <van-switch v-model="addNewGoods" size="20px" active-color="#FFD630" inactive-color="#999"/>				
				</div>
			</div>	
			
			
	    </div>
  
        <!--定位地区选择-->
	    <van-popup
		  v-model="showPopup1"
		  position="right"
		  :overlay="false"
		  :style="{ height: '100%',width:'100%'}"
		>
			<van-nav-bar title="所在地"> 
			  <van-icon name="arrow-left" slot="left" color="#000" size="20" @click="showPopup1=false"/>		  		  
			</van-nav-bar>	
			
			<div style="padding: 0 15px;">
				<van-cell  is-link @click="getLocation">
					<div slot="title">
						<span style="font-size: 15px;">获取当前位置</span>
						<span style="color: #999;margin-left: 6px;">当前定位</span>
					</div>
					<template #right-icon>
                        <van-icon name="location-o" style="line-height: inherit;" />
                    </template>
				</van-cell >
				<van-cell is-link @click="showPopup2=true">
					<div slot="title">
						<span style="font-size: 14px;">选择地区</span>
					</div>
				</van-cell >				
			</div>
			
			
			<van-popup v-model="showPopup2" position="bottom" :style="{ height: '50%' }">
			     <van-area title="选择地区" :area-list="areaList" cancel-button-text=' ' @confirm="queryAddress"/>			
			</van-popup>
		</van-popup>
		
		
		
		<!--价格弹出层-->
		<floor21 ref="floor21"  @confirmPricePopup="handlePricePopup" @clear="clearPrice" :goodsManagerFee="goodsManagerFee"></floor21>
		<!--佣金弹出层-->
		<floor38 ref="floor38" :comPrice="params.comPrice" @confirmMoney="handleMoney"></floor38>	
		<!--数量弹出层-->
		<floor39 ref="floor39" @confirmNumber="handleNumber"></floor39>	
		<!--更多信息弹框-->
		<floor40 ref="floor40" @confirmCategory="handleCategory"></floor40>	
		
		<!--选择分类-->
		<floor41 ref="floor41" @selectCategory="comfirmCategory"></floor41>		
		
		<van-overlay :show="showOverlay" z-index="20000"
			style="display: flex;align-items: center;justify-content: center;">
			<van-loading size="24px" vertical>数据提交中...</van-loading>		
		</van-overlay>		
	</div>
</template>                                                                

<script>
import areaList from '@/api/area.js'		
import Floor20 from '_c/market/floor/floor20.vue'	
import Floor21 from '_c/market/floor/floor21.vue'	
import Floor38 from '_c/market/floor/floor38.vue'
import Floor39 from '_c/market/floor/floor39.vue'
import Floor40 from '_c/market/floor/floor40.vue'
import Floor41 from '_c/market/floor/floor41.vue'	
import {getFun} from '@/api/publicFun.js'	 
let publicFun=getFun()
export default {
	name: 'ReleaseAgain',	
	data() {
       return {
       	  categoryId:-1,  // 初始化商品分类ID
       	  categoryIdName:'',  // 初始化商品分类名称       	
       	  goodsManagerFee:'0', // 平台管理费
       	  showOverlay:false,
       	  forbiddenWords:false, // 是否含有禁用词
       	  forbiddenImg:false,   // 是否含有禁用图片       	
       	  checkImgNow:false,    // 验证是否含有禁用图片中
       	  url2:this.$api+'/marketorderservice/api/v1/market/updateGoods',       // 修改商品
       	  url4:this.$api+'/marketorderservice/api/v1/market/addNewGoods',       // 全新发布  
       	  url3:this.$api+'/marketorderservice/api/v1/market/goods', // 请求商品详情的接口
       	  url5:this.$api+'/marketuserservice/api/v1/market/censor/text', // 验证禁用词
       	  url6:this.$api+'/marketuserservice/api/v1/market/censor/img',  // 验证图片
       	  url7:this.$api+'/marketorderservice/api/v1/market/goods/getManagerFee', // 平台管理费
       	  // canRelease:false,       // 用于绑定是否能够点击发布按钮 必须满足某些条件后才能点击
       	  isLoading:false,        // 用于绑定发布按钮是否处于加载中，防止2次插入
       	  imgList:[],             // 用于绑定已上传的图片数组（组件内部使用，在删除图片时用到）
       	  params:{ 
       	  	comUid:'',    // 发布者ID
       	  	comDesc:''  , // 绑定商品描述     	
       	  	address:'点击获取地理位置', // 记录发布商品地址
       	  	comPrice:'0.00', // 记录商品价
       	  	comOriginalprice:null, // 记录商品入手价
       	  	freight:'',    // 记录商品运费
       	  	comIspost:0, // 记录商品是否包邮        
       	  	money:'0.00', // 记录商品佣金
       	    limitCount:'', // 绑定发布商品限购数量
       	    goodsCount:'1',// 绑定发布商品数量
       	    categoryId:'1',// 绑定分类ID       
       	    goodsLabel:'', // 记录商品标签
       	    goodsImage:'', // 记录商品图片
       	    comIsdistance:0,
       	    isshare:0,     // 是否群分享可见
       	    groupid:'',     // 群ID
       	    goodsState:1   // 重新发布商品
       	  }, 
       	  showPopup1:false,      // 显示地理位置弹框
       	  areaList:areaList,
       	  showPopup2:false,     // 显示 地区选择弹框
          showPricePopup:true, // 用于价格编辑弹出层   
          categoryName:'补充信息获得更多推广',    // 绑定分类名称
          goodsCount:'1',
          showPopup3:true,
          addNewGoods:false, // 是否全新发布
       }
	},
//	watch:{
//      params: {
//       handler: function() {         	
//       	let goodsImage=this.params.goodsImage
//       	let categoryId=this.params.categoryId
//       	let comPrice=this.params.comPrice
//       	let comDesc=this.params.comDesc
//       	let address=this.params.address
//          if(comDesc!='' && comPrice!='0.00'&& goodsImage!='' && this.categoryId<0){
//          	this.canRelease=false
//          }else{
//          	this.canRelease=true
//          }         	
//       },
//       deep: true
//      }
//	},
	computed: {
	    // 计算还需支付
	    all:function(){
	       if(this.params.goodsCount>=0){
	       	  return (this.params.goodsCount*this.params.comPrice).toFixed(2)+' 元'
	       }else{
	       	  return '不限量'
	       }          
	    },
	    canRelease:function(){
	    	let goodsImage=this.params.goodsImage
	    	let comDesc=this.params.comDesc
	    	let comPrice=this.params.comPrice
	    	let categoryId=this.categoryId
            if(comDesc!='' && comPrice!='0.00' && goodsImage!='' && categoryId>=0){
            	return false
            }else{
            	return true
            }  	    	
	    }	    
	}, 		
	components: {
       Floor20,Floor21,Floor38,Floor39,Floor40,Floor41
	},	
	methods: {
		// 确认选择分类
		comfirmCategory(item){
	        this.categoryId=item.categoryId
	      	this.categoryIdName=item.categoryName
		},
		// 选择分类弹框
		showCategoryWin(){
		   this.$refs.floor41.show()
		},		
		formatCount(str){
			if(str==-1){
				return '不限量'
			}else{
				return str
			}
		},		
		init(){
	      	let that=this	      	
		    this.$Axios2.Get(this.url3+'/'+this.params.comId+'/'+this.params.comUid)
		    .then(function(res) {
		       // 新增 处理商品分类
		       if(!res.data.categoryId){
		       	 that.categoryId=-1
		       }else{
		         that.categoryId=res.data.categoryId
		       }
		       that.categoryIdName=res.data.categoryName
		       // 新增 处理商品分类结束
		       
               that.params.comDesc=res.data.comDesc
               that.params.goodsImage=res.data.goodsImageList.join(',')
               that.imgList=res.data.goodsImageList
               that.params.address=res.data.address?res.data.address:'点击获取地理位置'
               that.params.comPrice=res.data.comPrice.toFixed(2)
               that.params.comOriginalprice=res.data.comOriginalprice.toFixed(2)
               that.params.freight=res.data.freight==0?'':res.data.freight.toFixed(2)
               that.params.comIspost=res.data.comIspost
               that.params.comIsdistance=res.data.comIsdistance
               that.$refs.floor21.init(that.params.comPrice,that.params.comOriginalprice,that.params.freight,that.params.comIspost,that.params.comIsdistance)               
               that.params.money=res.data.money.toFixed(2)
               that.$refs.floor38.init(that.params.money)
               that.params.goodsCount=res.data.goodsCount
               that.params.limitCount=res.data.limitCount   
               if(that.params.goodsCount<0){
               	 that.goodsCount='不限量'
               }else{
               	 that.goodsCount=res.data.goodsCount
               }
               that.$refs.floor39.init(that.params.goodsCount,that.params.limitCount)    
               that.params.goodsLabel=res.data.goodsLabel
               that.params.categoryId=res.data.categoryId
               that.params.isshare=res.data.isshare
               that.params.groupid=res.data.groupid
               that.$refs.floor40.init(that.params.categoryId,res.data.categoryName,that.params.goodsLabel,that.params.isshare,that.params.groupid)               
               
               if(!res.data.goodsLabel){
               	 that.categoryName='补充信息获得更多推广'
               }else{
               	 that.categoryName=that.params.goodsLabel
               }                  
//             if(res.data.categoryName&&!res.data.goodsLabel){
//             	that.categoryName+=res.data.categoryName
//             }
//             if(res.data.goodsLabel&&!res.data.categoryName){
//             	that.categoryName+=that.params.goodsLabel  
//             }
//             if(res.data.categoryName&&res.data.goodsLabel){
//             	 that.categoryName=res.data.categoryName+'/'+that.params.goodsLabel 
//             }                         
		    })			
		},
		// 调用原生方法获取地理位置
		getLocation(){
			// IOS环境下
			if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
				
			} 
			// 安卓环境下
			else if(navigator.userAgent.match(/android/i)) {
                try {
                  window.loadAndroid.jsGetLocation()	
                  return true
                }
                catch(err){
                  return false
                }
			}                                  
		},
		// 获取地址后的回调
		callJsGetLocation(str){
			// 做判断
			if(str){
			  this.getAddress=1	
			  this.params.address=str	
			  this.showPopup1=false
			}else{
			  this.getAddress=-1	
	      	  this.$toast('获取地理位置失败,请手动选择'); 				
			}
		},
		// 获取图片地址后的回调
		callJSGetImgUrl(str){
			this.imgList=this.imgList.concat(str.split(','))
			this.params.goodsImage=this.imgList.join()
			let params={
				"filePath":this.params.goodsImage
			}
			let that=this
			this.checkImgNow=true
			// 验证图片是否合格
			this.$Axios2.Post(this.url6,params).then(function(res){
				that.checkImgNow=false
				if(res.result&&res.result.conclusionType>1){					
					that.forbiddenImg=true
				}else{
					that.forbiddenImg=false
				}				
			})	
		},
		// 删除图片
		delImg(index){
			this.imgList.splice(index,1)
			this.params.goodsImage=this.imgList.join()
		},
		// 打开地址弹框
		showAddressPopup(){
			this.showPopup1=true
		},
		// 确认选择地址
		queryAddress(res){
			this.params.address=res[0].name+' '+res[1].name+' '+res[2].name
			this.showPopup2=false
			this.showPopup1=false
		},
		getFree(){
			let that=this
			that.$Axios2.Get(that.url7).then(function(res){
				that.goodsManagerFee=(res.data.goodsManagerFee*100).toFixed(2)
			})
		},		
		// 发布商品
		release(){			
			if(this.params.comDesc==''){
				this.$toast('商品描述不能为空')
				return false
			}
			if(this.params.comPrice=='0.00'){
				this.$toast('商品价格不能为空')
				return false				
			}
			if(this.params.comPrice>=10000000){
				this.$toast('商品价格不能超过1000W')
				return false				
			}			
			if(this.params.goodsImage==''){
				this.$toast('商品图片不能为空')
				return false				
			}	
			if(this.params.address=="点击获取地理位置"){
				this.params.address=''
			}
			// 判断有没有选择分类
			if(this.categoryId>=0){
				this.params.categoryId=this.categoryId
			}else{
				this.$toast('商品分类不能为空')
				return false				
			}
			
			this.showOverlay=true
			let that=this
			that.params.freight=that.params.freight?that.params.freight:0
			let url;
			if(that.addNewGoods){
				url=that.url4
			}else{
				url=that.url2
			}			
			that.isLoading=true
			that.$Axios.Post(url, that.params).then(function(res3) {
		       that.isLoading=false
		       that.showOverlay=false
		       if(res3.responseCode==100){                   		       	
		           let arg='[{"comId":"'+res3.data.comId+'"},{"backType":"'+that.backType+'"}]' 
			   	   that.link('/market/goods/preview',arg)			       	
		       }else{
				   that.$dialog.alert({
				      message: res3.messageList[0].message,
				   })				       
		       }									
			})			
			// 验证是否含有违规文字
//			this.$Axios2.Post(this.url5,tParams).then(function(res){
//				if(res.result.conclusionType){
//					if(res.result.conclusionType!=1){
//						that.showOverlay=false
//						that.$toast('含有违规文字')
//						that.forbiddenWords=true
//						return false							
//					}else{
//						that.forbiddenWords=false
//						that.params.freight=that.params.freight?that.params.freight:0
//						let url;
//						if(that.addNewGoods){
//							url=that.url4
//						}else{
//							url=that.url2
//						}			
//						that.isLoading=true
//						that.$Axios.Post(url, that.params).then(function(res3) {
//					       that.isLoading=false
//					       that.showOverlay=false
//					       if(res3.responseCode==100){                   		       	
//					           let arg='[{"comId":"'+res3.data.comId+'"},{"backType":"'+that.backType+'"}]' 
//						   	   that.link('/market/goods/preview',arg)			       	
//					       }else{
//							   that.$dialog.alert({
//							      message: res3.messageList[0].message,
//							   })				       
//					       }									
//						})						
//					}						
//				}               
//			})	
		},
	    // 显示价格弹出层
	    showPrice(){
	      	this.$refs.floor21.show()
	    },
	    // 显示分类弹层
	    showCategory(){
	    	this.$refs.floor40.show()
	    },
	    clearPrice(){
	    	this.params.comPrice='0.00'
	    },
	    // 处理确认价格
	    handlePricePopup(obj,str){
	    	this.params.comPrice=obj.comPrice
	    	this.params.comOriginalprice=obj.comOriginalprice
	    	this.params.comIspost=obj.comIspost==true?1:0
	    	this.params.comIsdistance=obj.comIsdistance==true?1:0
	    	this.params.freight=obj.freight	
	    },
	    // 显示佣金弹出层
		showMoney(){
			this.$refs.floor38.show()
		},
		// 处理佣金
		handleMoney(str){
			this.params.money=str
		},
		// 显示数量弹出层
		showNumber(){
			this.$refs.floor39.show()
		},
		// 处理数量
		handleNumber(num1,num2){
			if(!num1){
				this.goodsCount='不限量'
			}else{
				this.goodsCount=num1
			}
			this.params.goodsCount=num1
			this.params.limitCount=num2
		},
		// 处理分类
		handleCategory(categoryId,str1,str2,isshare,groupid){			
			// if(!categoryId){categoryId=1}
			// this.params.categoryId=categoryId
			this.params.goodsLabel=str1
			this.params.isshare=isshare
			this.params.groupid=groupid
			if(str2){this.categoryName=str2}else{this.categoryName='补充信息获得更多推广'}
			// this.categoryName=str2
		},
		formatName(str){
			if(str.length>10){
				str=str.substring(0,10)+'...'
			}
			return str
		},
	},
	mixins:[publicFun],//混入
	mounted() {
		this.params.comUid=this.$router.currentRoute.query.userId;
		this.params.comId=this.$router.currentRoute.query.comId;
		this.backType=this.$router.currentRoute.query.backType;
		if(this.params.comId){
			this.init()
		}
		this.getLocation()
		this.getFree()
		window.callJsGetLocation = this.callJsGetLocation 	// 挂载获取地址回调方法
		window.callJSGetImgUrl=this.callJSGetImgUrl         // 挂载获取图片回调方法
	}
}
</script>

<style scoped lang="scss"> 
.wrap{padding: 20px;background: #fff;}	
.van-nav-bar__title{font-weight: bold;}
.a{height: 46px;width: 70px;display: flex;justify-content: center;align-items: center;}
.release{background: #fef723;border:none;color: #333;}
.release.active{opacity: 0.5;}
.cc{display: flex;align-items: center;justify-content: center;}
.imgWrap{height: 100px;background: #f2f2f2;border-radius: 4px;}
.imgWrap>img{width: 100%;height: 100%;border-radius: 4px;}
.tips{color: #848484;margin-top: 20px;}
.tips .span{background: #f2f2f2;padding: 4px 12px;border-radius: 10px;}
.cell{margin-top: 30px;
  .cell_img{width: 17px;height: 17px;vertical-align: text-top;margin-right: 10px;}
}
.van-cell{padding-left: 0;padding-right: 0;}
.borderCell:nth-child(1){border-top:1px solid #f5f6f8}
.borderCell:nth-last-child(1){border-bottom:1px solid #f5f6f8}

.imgList:after{content:"";display:block;clear:both;}
.imgList .imgContain{float: left;margin-right: 2%;width: 23.5%;margin-bottom: 10px;position: relative;}
.imgList .imgContain img{width: 100%;height: 80px;}
.imgList .imgContain:nth-child(4n){margin-right: 0;}
.clear{position: absolute;right: -6px;top: -6px;z-index: 100;}


.defaultWrap{display: flex;padding: 10px 0px;align-items: center;}
.defaultWrap .left{width: 80%;}
.defaultWrap .right{flex: 1;display: flex;justify-content: flex-end;}
</style>